<template>
  <el-container>
    <el-header
      class="header"
    >
      <QueryForm
        ref="queryFormRef"
        :model="queryForm.data"
        @query="handleQueryFormQuery"
        @reset="handleQueryFormReset"
      >
      </QueryForm>
    </el-header>
    <el-main>
      <ControlButtonGroup
        :disabled-array="controlButtonGroupDisabledArray"
        @add="handleControlButtonGroupAdd"
        @resource-allocate="handleControlButtonGroupResourceAllocate"
        @user-allocate="handleControlButtonGroupUserAllocate"
        @delete="handleControlButtonGroupDelete"
        @refresh="handleControlButtonGroupRefresh"
      >
      </ControlButtonGroup>
      <RoleDataTable
        ref="roleDataTableRef"
        :data-array="roleDataTable.dataArray"
        :is-loading="roleDataTable.isLoading"
        :pagination="roleDataTable.pagination"
        @copy="handleRoleDataTableCopy"
        @current-change="handleRoleDataTablePageNumChange"
        @delete="handleRoleDataTableDelete"
        @edit="handleRoleDataTableEdit"
        @rights-show="handleRoleDataTableRightsShow"
        @selection-change="handleRoleDataTableSelectionChange"
        @size-change="handleRoleDataTablePageSizeChange"
      ></RoleDataTable>
      <RoleDataForm
        ref="roleDataFormRef"
        :is-loading="roleDataForm.isLoading"
        :is-visible.sync="roleDataForm.isVisible"
        :model="roleDataForm.data"
        @submit="handleRoleDataFormSubmit"
      >
      </RoleDataForm>
      <UserAllocator
        :is-loading="userAllocator.isLoading"
        :is-visible.sync="userAllocator.isVisible"
        :pagination="userAllocator.pagination"
        :table="userAllocator.table"
        @current-change="handleUserAllocatorTablePageNumChange"
        @query="handleUserAllocatorQueryFormQuery"
        @size-change="handleUserAllocatorTablePageSizeChange"
        @submit="handleUserAllocatorSubmit"
      ></UserAllocator>
      <ResourceAllocator
        ref="resourceAllocatorRef"
        :checked-id-array="resourceAllocator.checkedIdArray"
        :is-disabled="resourceAllocator.isDisabled"
        :is-loading="resourceAllocator.isLoading"
        :is-visible.sync="resourceAllocator.isVisible"
        :total-data-array="resourceAllocator.totalDataArray"
        @submit="handleResourceAllocatorSubmit"
      ></ResourceAllocator>
    </el-main>
  </el-container>
</template>

<script>
import {
  add,
  assignResource,
  assignUser,
  batchRemove,
  commonQuery,
  commonQueryUser,
  modify,
  queryRoleById,
  remove,
} from '@/api/right/role'
import ControlButtonGroup from './ControlButtonGroup.vue'
import QueryForm from './QueryForm.vue'
import ResourceAllocator from './ResourceAllocator.vue'
import RoleDataForm from './RoleDataForm.vue'
import RoleDataTable from './RoleDataTable.vue'
import UserAllocator from './UserAllocator.vue'
import {
  commonQuery as commonQueryForUser,
} from '@/api/right/user'
import {
  treeQuery,
} from '@/api/right/resource'

/**
 * 获取`角色数据表单`的数据
 * @param {String} id 用户的`id`属性
 * @return {Promise<{
 *   'code': String,
 *   'name': String,
 *   'remark': String,
 *   'status': 0 | 1,
 * }>}
 */
const getRoleDataFormData = async (id) => {
  try {
    const {
      code,
      name,
      remark,
      status,
    } = await queryRoleById(id)
    return {
      code,
      name,
      remark,
      status,
    }
  } catch (error) {
    console.error(error)
  }
  throw new Error('查询角色数据时出错')
}
/**
 * 获取角色数据的`version`属性
 * @param {String} id 角色数据的`id`属性
 * @return {Promise<String>} version
 */
const getRoleDataVersionById = async (id) => {
  try {
    return (await queryRoleById(id)).version
  } catch (error) {
    console.error(error)
  }
  throw new Error('查询角色数据版本时出错')
}

export default {
  'name': 'Role',

  'components': {
    ControlButtonGroup,
    QueryForm,
    ResourceAllocator,
    RoleDataForm,
    RoleDataTable,
    UserAllocator,
  },

  'data' () {
    return {
      /**
       * `查询表单`
       */
      'queryForm': {
        'data': {
          'name': '',
        },
      },
      /**
       * `资源分配器`
       */
      'resourceAllocator': {
        'checkedIdArray': [],
        'isDisabled': false,
        'isLoading': false,
        'isVisible': false,
        'totalDataArray': [],
      },
      /**
       * `角色数据表单`
       */
      'roleDataForm': {
        'data': {
          'code': '',
          'name': '',
          'remark': '',
          'status': 1,
        },
        'id': '',
        'isLoading': false,
        'isVisible': false,
        // 两种模式：增加（add）、编辑（edit）
        'mode': 'add',
      },
      /**
       * `角色数据表格`
       */
      'roleDataTable': {
        'dataArray': [],
        'isLoading': false,
        'pagination': {
          'number': 1,
          'size': 10,
          'total': 0,
        },
        'selectedRowArray': [],
      },
      /**
       * `用户分配器`
       */
      'userAllocator': {
        'isLoading': false,
        'isVisible': false,
        'pagination': {
          'number': 1,
          'size': 10,
          'total': 0,
        },
        'queryForm': {
          'data': {
            'name': '',
          },
        },
        'table': {
          'dataArray': [],
          'isLoading': false,
          'selectedRowArray': [],
        },
      },
    }
  },

  'computed': {
    /**
     * 设置`控制按钮组`里的按钮是否无效的计算属性组成的数组
     *
     * 如果`角色数据表格`没有勾选任何行，则使其处于无效状态，使用户无法点击
     */
    'controlButtonGroupDisabledArray' () {
      const {
        selectedRowArray,
      } = this.roleDataTable
      return [
        false,
        selectedRowArray.length === 0,
        selectedRowArray.length === 0,
        selectedRowArray.length === 0,
        false,
      ]
    },
  },

  'created' () {
    this.setRoleDataTableData()
  },

  'methods': {
    /**
     * 在`角色数据表格`中增加一条角色数据
     */
    async 'addRole' () {
      const {
        $message,
        roleDataForm,
      } = this
      const {
        data,
      } = roleDataForm
      const {
        code,
      } = data
      if ((await this.getRoleDataTableData({
        code,
      })).dataArray.some(({
        'code': roleCode,
      }) => {
        return roleCode === code
      })) {
        throw new Error('代码不能重复')
      }
      try {
        if (await add(data)) {
          $message({
            'message': '增加成功',
            'type': 'success',
          })
          return
        }
      } catch (error) {
        console.error(error)
      }
      throw new Error('增加角色数据时出错')
    },
    /**
     * 将在`资源分配器`里被勾选的资源分配给`角色数据表格`里被勾选的角色
     */
    async 'allocateResource' () {
      const {
        $message,
        resourceAllocator,
        roleDataTable,
      } = this
      const {
        checkedIdArray,
      } = resourceAllocator
      const {
        selectedRowArray,
      } = roleDataTable
      try {
        if (await assignResource({
          'resourceIds': checkedIdArray,
          'roleIds': selectedRowArray.map(({
            id,
          }) => {
            return id
          }),
        })) {
          $message({
            'message': '分配成功',
            'type': 'success',
          })
          return
        }
      } catch (error) {
        console.error(error)
      }
      throw new Error('分配资源时出错')
    },
    /**
     * 将被勾选的用户分配给被勾选的`角色数据表格`行对应的角色
     */
    async 'allocateUserToRole' () {
      const {
        $message,
        roleDataTable,
        userAllocator,
      } = this
      const {
        selectedRowArray,
      } = roleDataTable
      const {
        table,
      } = userAllocator
      const load = {
        'roleIds': selectedRowArray.map(({
          id,
        }) => {
          return id
        }),
        'userIds': table.selectedRowArray.map(({
          id,
        }) => {
          return id
        }),
      }
      try {
        if (await assignUser(load)) {
          $message({
            'message': '分配成功',
            'type': 'success',
          })
          return
        }
      } catch (error) {
        console.error(error)
      }
      throw new Error('分配用户时出错')
    },
    /**
     * 删除确认框，用来确认是否删除并且展示加载动画
     * @param {Function} task 点击`确定`后的任务，以回调函数形式传入
     */
    'deleteConfirm' (task) {
      return this.$confirm(
        '确定删除（不可恢复）？',
        '删除确认',
        {
          async 'beforeClose' (action, instance, done) {
            if (action !== 'confirm') {
              done()
              return
            }
            instance.confirmButtonLoading = true
            instance.confirmButtonText = ''
            instance.showCancelButton = false
            instance.message = '正在删除...'
            await task()
            done()
          },
          'cancelButtonText': '取消',
          'confirmButtonLoading': false,
          'confirmButtonText': '确定',
          'showCancelButton': true,
          'type': 'warning',
        },
      )
    },
    /**
     * 删除`用户数据表格`的一行的用户数据
     * @param {Row} row `用户数据表格`的一行
     */
    async 'deleteRole' (row) {
      const {
        $message,
      } = this
      const {
        id,
      } = row
      let userNumber = 0
      try {
        userNumber = (await commonQueryForUser({
          'roleId': id,
        })).total
      } catch (error) {
        console.error(error)
        throw new Error('查询用户数据时出错')
      }
      if (userNumber !== '0') {
        throw new Error(`无法删除：有${userNumber}个用户拥有此角色`)
      }
      try {
        if (await remove(
          id,
          await getRoleDataVersionById(id),
        )) {
          $message({
            'message': '删除成功',
            'type': 'success',
          })
          return
        }
      } catch (error) {
        console.error(error)
      }
      throw new Error('删除角色数据时出错')
    },
    /**
     * 删除被勾选的`角色数据表格`行的用户数据
     */
    async 'deleteSelectedRoleArray' () {
      const {
        $message,
        roleDataTable,
      } = this
      const {
        selectedRowArray,
      } = roleDataTable
      let result = []
      try {
        result = await Promise.all(await selectedRowArray.reduce(async (
          previousArray,
          selectedRow,
        ) => {
          const {
            total,
          } = await commonQueryForUser({
            'roleId': selectedRow.id,
          })
          if (total !== '0') {
            (await previousArray).push({
              'name': selectedRow.name,
              'number': total,
            })
          }
          return previousArray
        }, Promise.resolve([])))
      } catch (error) {
        console.error(error)
        throw new Error('查询用户数据时出错')
      }
      if (result.length !== 0) {
        throw result.map(({
          name,
          number,
        }) => {
          return new Error(`无法删除：角色“${name}”正被${number}个用户拥有`)
        })
      }
      const load = await Promise.all(selectedRowArray.map(async ({
        id,
      }) => {
        return {
          id,
          'version': await getRoleDataVersionById(id),
        }
      }))
      try {
        if (await batchRemove(load)) {
          $message({
            'message': '删除成功',
            'type': 'success',
          })
          return
        }
      } catch (error) {
        console.error(error)
      }
      throw new Error('删除用户数据时出错')
    },
    /**
     * 修改`角色数据表格`的一行的角色数据
     */
    async 'editRole' () {
      const {
        $message,
        roleDataForm,
      } = this
      const {
        data,
        id,
      } = roleDataForm
      const {
        code,
      } = data
      if ((await this.getRoleDataTableData({
        code,
      })).dataArray.some(({
        'code': roleCode,
        'id': roleId,
      }) => {
        return roleCode === code && roleId !== id
      })) {
        throw new Error('代码不能重复')
      }
      try {
        if (await modify({
          id,
          'version': await getRoleDataVersionById(id),
          ...data,
        })) {
          $message({
            'message': '修改成功',
            'type': 'success',
          })
          return
        }
      } catch (error) {
        console.error(error)
      }
      throw new Error('修改用户数据时出错')
    },
    /**
     * 获取`角色数据表格`的数据
     * @param {{
     *   'name': String,
     * }} queryParameters 查询参数
     * @return {{
     *   'dataArray': {
     *     'code': String,
     *     'company': String,
     *     'id': String,
     *     'name': String,
     *     'organization': String,
     *     'remark': String,
     *     'status': 0 | 1,
     *   }[],
     *   'total': Number,
     * }}
     */
    async 'getRoleDataTableData' (queryParameters = this.queryForm.data) {
      const {
        roleDataTable,
      } = this
      const {
        pagination,
      } = roleDataTable
      const {
        number,
        size,
      } = pagination
      try {
        const {
          data,
          total,
        } = await commonQuery({
          'pageNum': number,
          'pageSize': size,
          ...queryParameters,
        })
        return {
          'dataArray': data.map(({
            code,
            companyDTO,
            id,
            name,
            organizationDTO,
            remark,
            status,
          }) => {
            return {
              code,
              'company': companyDTO.name,
              id,
              name,
              'organization': organizationDTO.name,
              remark,
              status,
            }
          }),
          'total': Number(total),
        }
      } catch (error) {
        console.error(error)
      }
      throw new Error('查询角色数据表格数据时出错')
    },
    /**
     * 获取`用户分配器`的表格的数据
     * @return {{
     *   'dataArray': {
     *     'code': String,
     *     'company': String,
     *     'department': String,
     *     'id': String,
     *     'name': String,
     *   }[],
     *   'total': 0,
     * }}
     */
    async 'getUserAllocatorData' () {
      const {
        userAllocator,
      } = this
      const {
        pagination,
        queryForm,
      } = userAllocator
      const {
        number,
        size,
      } = pagination
      try {
        const {
          data,
          total,
        } = await commonQueryUser({
          'pageNum': number,
          'pageSize': size,
          ...queryForm.data,
        })
        return {
          'dataArray': data.map(({
            code,
            company,
            departmentVO,
            id,
            name,
          }) => {
            return {
              code,
              'company': company?.name,
              'department': departmentVO?.name,
              id,
              name,
            }
          }),
          'total': Number(total),
        }
      } catch (error) {
        console.error(error)
      }
      throw new Error('查询用户列表数据时出错')
    },
    /**
     * 处理`控制按钮组`的`增加`事件
     */
    'handleControlButtonGroupAdd' () {
      const {
        roleDataForm,
        $refs,
      } = this
      roleDataForm.mode = 'add'
      roleDataForm.isVisible = true
      roleDataForm.data = {
        'code': '',
        'name': '',
        'remark': '',
        'status': 1,
      }
      this.$nextTick(() => {
        $refs.roleDataFormRef.setInnerModel()
      })
    },
    /**
     * 处理`控制按钮组`的`删除`事件
     */
    async 'handleControlButtonGroupDelete' () {
      const {
        $refs,
        $message,
      } = this
      const task = async () => {
        try {
          await this.deleteSelectedRoleArray()
          this.$nextTick(() => {
            $refs.roleDataTableRef.clearSelection()
          })
          try {
            await this.setRoleDataTableData()
          } catch (error) {
            $message.error(error.message)
          }
        } catch (errorObject) {
          if (Array.isArray(errorObject)) {
            errorObject.forEach((error) => {
              setTimeout(() => {
                $message.error(error.message)
              })
            })
          } else {
            $message.error(errorObject.message)
          }
        }
      }
      try {
        await this.deleteConfirm(task)
      } catch {
        $message('已取消删除操作')
      }
    },
    /**
     * 处理`控制按钮组`的`刷新`事件
     */
    async 'handleControlButtonGroupRefresh' () {
      const {
        $confirm,
        $message,
        $refs,
        roleDataTable,
      } = this
      const {
        selectedRowArray,
      } = roleDataTable
      if (selectedRowArray.length > 0) {
        let action = ''
        try {
          action = await $confirm(
            '是否取消所有被勾选的表格条目的勾选状态？',
            {
              'cancelButtonText': '否',
              'confirmButtonText': '是',
              'distinguishCancelAndClose': true,
              'showCancelButton': true,
              'type': 'warning',
            },
          )
        } catch (error) {
          if (error === 'close') {
            return
          }
          action = error
        }
        this.roleDataTable = {
          'dataArray': [],
          'isLoading': false,
          'pagination': {
            'number': 1,
            'size': 10,
            'total': 0,
          },
          ...roleDataTable,
        }
        if (action === 'confirm') {
          this.roleDataTable.selectedRowArray = []
          this.$nextTick(() => {
            $refs.roleDataTableRef.clearSelection()
          })
        }
      }
      try {
        await this.setRoleDataTableData()
      } catch (error) {
        $message.error(error.message)
      }
    },
    /**
     * 处理`控制按钮组`的`分配资源`事件
     */
    async 'handleControlButtonGroupResourceAllocate' () {
      const {
        $message,
        $refs,
        resourceAllocator,
        roleDataTable,
      } = this
      const {
        selectedRowArray,
      } = roleDataTable
      resourceAllocator.isDisabled = false
      resourceAllocator.isLoading = true
      // resourceAllocator.totalDataArray = []
      // resourceAllocator.checkedIdArray = []
      resourceAllocator.isVisible = true
      try {
        resourceAllocator.totalDataArray = (await treeQuery({
          'pageSize': 1000,
        })).data
        this.$nextTick(() => {
          $refs.resourceAllocatorRef.setTree()
        })
        /**
         * 如果`角色数据表格`只选择了一行，那就显示他有哪些资源
         *
         * 如果选择了多行，那就不显示了
         */
        if (selectedRowArray.length === 1) {
          resourceAllocator.checkedIdArray = (await treeQuery({
            'pageSize': 1000,
            'roleId': selectedRowArray[0].id,
          })).data.map(({
            id,
          }) => {
            return id
          })
        }
      } catch (error) {
        console.error(error)
        $message.error('查询角色资源时出错')
      }
      resourceAllocator.isLoading = false
    },
    /**
     * 处理`控制按钮组`的`分配用户`按钮的点击事件
     */
    async 'handleControlButtonGroupUserAllocate' () {
      this.userAllocator = {
        'isLoading': false,
        'isVisible': false,
        'pagination': {
          'number': 1,
          'size': 10,
          'total': 0,
        },
        'queryForm': {
          'data': {
            'name': '',
          },
        },
        'table': {
          'dataArray': [],
          'isLoading': false,
          'selectedRowArray': [],
        },
      }
      const {
        $message,
        userAllocator,
      } = this
      userAllocator.isVisible = true
      userAllocator.isLoading = true
      try {
        await this.setUserAllocatorData()
      } catch (error) {
        $message.error(error.message)
      }
      userAllocator.isLoading = false
    },
    /**
     * 处理`查询表单`的`查询`按钮的点击事件
     * @param {{
     *    'name': String,
     *  }} data `查询表单`的数据
     */
    async 'handleQueryFormQuery' (data) {
      const {
        $message,
        queryForm,
        roleDataTable,
      } = this
      const {
        pagination,
      } = roleDataTable
      pagination.number = 1
      pagination.size = 10
      queryForm.data = data
      try {
        await this.setRoleDataTableData()
      } catch (error) {
        $message.error(error.message)
      }
    },
    /**
     * 处理`查询表单`的`重置`按钮的点击事件
     *
     * 因为查询时一定会重置页码，所以这里就无需重置了
     */
    'handleQueryFormReset' () {
      const {
        $refs,
        queryForm,
      } = this
      queryForm.data = {
        'name': '',
      }
      this.$nextTick(() => {
        $refs.queryFormRef.setInnerModel()
      })
    },
    /**
     * 处理`资源分配器`的提交事件
     * @param {String[]} checkedIdArray 已选择的`资源分配器`的树节点的`id`属性
     */
    async 'handleResourceAllocatorSubmit' (checkedIdArray) {
      const {
        $message,
        resourceAllocator,
      } = this
      resourceAllocator.isLoading = true
      resourceAllocator.checkedIdArray = checkedIdArray
      try {
        await this.allocateResource()
        resourceAllocator.isVisible = false
      } catch (error) {
        $message.error(error)
      }
      resourceAllocator.isLoading = false
    },
    /**
     * 处理`角色数据表单`的`提交`按钮的点击事件
     * @param {Boolean} isValid 是否通过验证
     * @param {RoleDataFormData} formData `角色数据表单`的数据
     */
    async 'handleRoleDataFormSubmit' (formData) {
      const {
        $message,
        roleDataForm,
      } = this
      roleDataForm.data = formData
      roleDataForm.isLoading = true
      try {
        // addRole editRole
        await this[`${roleDataForm.mode}Role`]()
      } catch (error) {
        $message.error(error.message)
        roleDataForm.isLoading = false
        return
      }
      roleDataForm.isLoading = false
      roleDataForm.isVisible = false
      try {
        await this.setRoleDataTableData()
      } catch (error) {
        $message.error(error.message)
      }
    },
    /**
     * 处理`角色数据表单`的`复制`按钮的点击事件
     * @param {String} id 用户数据的`id`属性
     */
    async 'handleRoleDataTableCopy' (id) {
      const {
        $message,
        $refs,
        roleDataForm,
      } = this
      roleDataForm.isLoading = true
      roleDataForm.mode = 'add'
      roleDataForm.isVisible = true
      try {
        roleDataForm.data = await getRoleDataFormData(id)
        this.$nextTick(() => {
          $refs.roleDataFormRef.setInnerModel()
        })
      } catch (error) {
        $message.error(error.message)
      }
      roleDataForm.isLoading = false
    },
    /**
     * 处理`角色数据表格`的`删除`按钮的点击事件
     * @param {String} id 角色数据的`id`属性
     */
    async 'handleRoleDataTableDelete' (row) {
      const {
        $refs,
        $message,
      } = this
      const task = async () => {
        try {
          await this.deleteRole(row)
          this.$nextTick(() => {
            $refs.roleDataTableRef.cancelRowSelection(row)
          })
          try {
            await this.setRoleDataTableData()
          } catch (error) {
            $message.error(error.message)
          }
        } catch (error) {
          $message.error(error.message)
        }
      }
      try {
        await this.deleteConfirm(task)
      } catch {
        this.$message('已取消删除操作')
      }
    },
    /**
     * 处理`角色数据表格`的`编辑`按钮的点击事件
     * @param {String} id 角色数据的`id`属性
     */
    async 'handleRoleDataTableEdit' (id) {
      const {
        $message,
        $refs,
        roleDataForm,
      } = this
      roleDataForm.isLoading = true
      roleDataForm.mode = 'edit'
      roleDataForm.id = id
      roleDataForm.isVisible = true
      try {
        roleDataForm.data = await getRoleDataFormData(id)
        this.$nextTick(() => {
          $refs.roleDataFormRef.setInnerModel()
        })
      } catch (error) {
        $message.error(error.message)
      }
      roleDataForm.isLoading = false
    },
    /**
     * 处理`角色数据表格`的页码的修改事件
     * @param {Number} number `角色数据表格`的页码
     */
    async 'handleRoleDataTablePageNumChange' (number) {
      const {
        $message,
        roleDataTable,
      } = this
      const {
        pagination,
      } = roleDataTable
      pagination.number = number
      try {
        await this.setRoleDataTableData()
      } catch (error) {
        $message.error(error.message)
      }
    },
    /**
     * 处理`角色数据表格`的页面容量的修改事件
     * @param {Number} size `角色数据表格`的页面容量
     */
    async 'handleRoleDataTablePageSizeChange' (size) {
      const {
        $message,
        roleDataTable,
      } = this
      const {
        pagination,
      } = roleDataTable
      pagination.size = size
      try {
        await this.setRoleDataTableData()
      } catch (error) {
        $message.error(error.message)
      }
    },
    /**
     * 处理`角色数据表格`的`查看权限`按钮的点击事件
     * @param {String} id 角色数据的`id`属性
     */
    async 'handleRoleDataTableRightsShow' (id) {
      const {
        $message,
        $refs,
        resourceAllocator,
      } = this
      resourceAllocator.isDisabled = true
      resourceAllocator.isLoading = true
      resourceAllocator.totalDataArray = []
      resourceAllocator.checkedIdArray = []
      resourceAllocator.isVisible = true
      try {
        resourceAllocator.totalDataArray = (await treeQuery({
          'pageSize': 1000,
        })).data
        this.$nextTick(() => {
          $refs.resourceAllocatorRef.setTree()
        })
        resourceAllocator.checkedIdArray = (await treeQuery({
          'pageSize': 1000,
          'roleId': id,
        })).data.map(({
          'id': checkedId,
        }) => {
          return checkedId
        })
      } catch (error) {
        console.error(error)
        $message.error('查询角色资源时出错')
      }
      resourceAllocator.isLoading = false
    },
    /**
     * 处理`角色数据表格`中被勾选的表格的行组成的数组的修改事件
     *
     * 即有新的行被勾选或有已被勾选的行被取消了勾选
     * @param {Row[]} selectedRowArray 被勾选的表格的行组成的数组
     */
    'handleRoleDataTableSelectionChange' (selectedRowArray) {
      this.roleDataTable.selectedRowArray = selectedRowArray
    },
    /**
     * 处理`用户分配器`的查询表单的查询按钮的点击事件
     * @param {{
     *   'name': String,
     * }} data `用户分配器`的查询表单的数据
     */
    async 'handleUserAllocatorQueryFormQuery' (data) {
      const {
        $message,
        userAllocator,
      } = this
      const {
        pagination,
        queryForm,
      } = userAllocator
      queryForm.data = data
      pagination.number = 1
      pagination.size = 10
      try {
        await this.setUserAllocatorData()
      } catch (error) {
        $message.error(error.message)
      }
    },
    /**
     * 处理`用户分配器`的提交事件
     */
    async 'handleUserAllocatorSubmit' (selectedRowArray) {
      const {
        $message,
        userAllocator,
      } = this
      const {
        table,
      } = userAllocator
      userAllocator.isLoading = true
      table.selectedRowArray = selectedRowArray
      try {
        await this.allocateUserToRole()
      } catch (error) {
        userAllocator.isLoading = false
        $message.error(error.message)
        return
      }
      userAllocator.isVisible = false
      userAllocator.isLoading = false
      try {
        await this.setRoleDataTableData()
      } catch (error) {
        $message.error(error.message)
      }
    },
    /**
     * 处理`用户分配器`的表格的页码的修改事件
     * @param {Number} number `用户分配器`的表格的页码
     */
    async 'handleUserAllocatorTablePageNumChange' (number) {
      const {
        $message,
        userAllocator,
      } = this
      const {
        pagination,
      } = userAllocator
      pagination.number = number
      try {
        await this.setUserAllocatorData()
      } catch (error) {
        $message.error(error.message)
      }
    },
    /**
     * 处理`用户分配器`的表格的页面容量的修改事件
     * @param {Number} size `用户分配器`的表格的页面容量
     */
    async 'handleUserAllocatorTablePageSizeChange' (size) {
      const {
        $message,
        userAllocator,
      } = this
      const {
        pagination,
      } = userAllocator
      pagination.size = size
      try {
        await this.setUserAllocatorData()
      } catch (error) {
        $message.error(error.message)
      }
    },
    /**
     * 设置`角色数据表格`的数据
     */
    async 'setRoleDataTableData' () {
      const {
        roleDataTable,
      } = this
      const {
        pagination,
      } = roleDataTable
      roleDataTable.dataArray = []
      roleDataTable.isLoading = true
      try {
        const {
          dataArray,
          total,
        } = await this.getRoleDataTableData()
        pagination.total = total
        roleDataTable.dataArray = dataArray
        roleDataTable.isLoading = false
      } catch (error) {
        roleDataTable.isLoading = false
        throw error
      }
    },
    /**
     * 设置`用户分配器`的数据
     */
    async 'setUserAllocatorData' () {
      const {
        userAllocator,
      } = this
      const {
        table,
        pagination,
      } = userAllocator
      table.dataArray = []
      table.isLoading = !userAllocator.isLoading
      try {
        const {
          dataArray,
          total,
        } = await this.getUserAllocatorData()
        pagination.total = total
        table.dataArray = dataArray
        table.isLoading = false
      } catch (error) {
        table.isLoading = false
        throw error
      }
    },
  },
}
</script>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;
}
</style>
